<!DOCTYPE html>
<html lang="en" x-data="{ 
    currentPage: 'home', 
    isCollapsed: false, 
    isRunning: false, 
    progress: { 
      totalTasks: 0, 
      completedTasks: 0, 
      feiledTasks: 0, 
      progressPercentage: 0, 
      progressText: '0%' 
    }, 
    isModalOpen: false, 
    modalContent: '{}',
    isOpen: false,
    selectedOption: '',
    selectItems: [],
    isProxyModalOpen: false,
    isServerModalOpen: false,
    proxy: {
      url: '',
      port: '',
      username: '',
      password: ''
    },
    serverAddress: '',
    imageSavePath: '',
    concurrency: 5,
    link_application: 1000
  }" x-on:playwright-started.window="isRunning = true" x-on:playwright-finished.window="isRunning = false"
  class="overflow-hidden">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tauri HTMX</title>
  <script src="js/lib/cdn.min.js" defer></script>
  <script src="js/lib/sweetalert2.min.js" defer></script>
  <script src="js/lib/flatpickr.js"></script>
  <script src="js/lib/gridjs.umd.js" defer></script>
  <script src="js/listen/data_task_message.js"></script>
  <script src="js/listen/data_task_message_progress.js"></script>
  <script src="js/settings.js"></script>
  <script src="js/pagination.js"></script>
  <script src="js/datatable.js"></script>
  <script src="js/main.js"></script>
  <link href="css/tailwind.css" rel="stylesheet">
  <link rel="stylesheet" href="css/main.css">
  <link rel="stylesheet" href="css/sweetalert2.min.css">
  <link rel="stylesheet" href="css/mermaid.min.css">
  <link rel="stylesheet" href="css/flatpickr.min.css">
</head>

<body class="bg-gradient-to-r from-blue-50 to-purple-50">
  <!-- 弹窗组件 -->
  <div>
    <!-- 弹窗 -->
    <div x-show="isModalOpen" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
      <div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
        <h2 class="text-xl font-bold mb-4">任务详情</h2>
        <!-- 使用 <pre> 标签展示格式化后的 JSON -->
        <pre x-text="JSON.stringify(JSON.parse(modalContent), null, 2)"
          class="text-gray-700 bg-gray-100 p-4 rounded-lg overflow-auto max-h-64"></pre>
        <button @click="isModalOpen = false" class="mt-4 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          关闭
        </button>
      </div>
    </div>
  </div>
  <!-- 整体布局 -->
  <div class="flex min-h-screen">
    <!-- 左侧导航栏 -->
    <nav :class="{ 'w-64': !isCollapsed, 'w-16': isCollapsed }"
      class="bg-white shadow-lg p-4 transition-all duration-300">
      <!-- 收缩/展开按钮 -->
      <button @click="isCollapsed = !isCollapsed"
        class="w-full flex items-center justify-center p-2 mb-4 rounded-lg hover:bg-gray-100 transition duration-300">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path x-show="!isCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12" />
          <path x-show="isCollapsed" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>

      <!-- 导航栏内容 -->
      <ul class="space-y-2">
        <li>
          <button @click="currentPage = 'home'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'home' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">首页</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'progress'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'progress' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">进度</span>
          </button>
        </li>
        <li>
          <button @click="goto_data('data')"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'data' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <!-- 数据中心图标 -->
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 21h-10a2 2 0 01-2-2V5a2 2 0 012-2h10a2 2 0 012 2v14a2 2 0 01-2 2zm-8-3a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1V9z">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">数据中心</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'settings'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'settings' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <!-- 设置图标 -->
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">设置</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'about'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'about' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">关于</span>
          </button>
        </li>
        <li>
          <button @click="currentPage = 'contact'"
            :class="{ 'bg-gradient-to-r from-blue-500 to-purple-500 text-white': currentPage === 'contact' }"
            class="w-full flex items-center space-x-2 px-2 py-2 rounded-lg hover:bg-gray-100 transition duration-300">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z">
              </path>
            </svg>
            <span x-show="!isCollapsed" class="truncate">联系</span>
          </button>
        </li>
      </ul>
    </nav>

    <!-- 右侧内容区域 -->
    <div class="flex-1 p-8 flex flex-col">
      <!-- 首页 -->
      <div x-show="currentPage === 'home'" class="space-y-4 flex-1 flex flex-col">

        <h1 class="text-3xl font-bold text-gray-800">欢迎来到首页</h1>
        <p class="text-gray-600">欢迎使用 Tauri Python 项目，这里是项目的展示页面。</p>

        <!-- 运行测试按钮 -->
        <div class="flex justify-center space-x-4">
          <div style="width: 28vw;">
            <!-- 下拉框触发按钮 -->
            <button @click="isOpen = !isOpen"
              class="w-full px-4 py-2.5 text-left text-base border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300 ease-in-out bg-white text-gray-700 hover:bg-gray-50 flex items-center justify-between">
              <span x-text="selectedOption || '请选择'" class="truncate"></span>
              <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-300"
                :class="{ 'rotate-180': isOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>

            <!-- 下拉菜单 -->
            <div x-show="isOpen" @click.away="isOpen = false"
              class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden transform origin-top transition-all duration-300 ease-in-out"
              :class="{ 'scale-y-100 opacity-100': isOpen, 'scale-y-95 opacity-0': !isOpen }">
              <ul class="py-1">
                <template x-for="item in selectItems">
                  <li @click="selectedOption = item; isOpen = false"
                    class="px-4 py-2.5 text-gray-700 hover:bg-blue-50 cursor-pointer transition duration-300 ease-in-out flex items-center space-x-2">
                    <span x-text="item"></span>
                  </li>
                </template>
              </ul>
            </div>
          </div>
          <!-- 运行测试按钮 -->
          <button @click="run_playwright()" :disabled="isRunning" class="btn-primary">
            <span x-show="!isRunning">运行测试</span>
            <span x-show="isRunning" class="flex items-center">
              <svg class="animate-spin h-5 w-5 text-white mr-2" xmlns="http://www.w3.org/2000/svg" fill="none"
                viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor"
                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                </path>
              </svg>
              运行中...
            </span>
          </button>
          <!-- 清空结果按钮 -->
          <button @click="clear_playwright_result()" class="btn-primary">
            清空结果
          </button>
        </div>

        <!-- 测试结果列表 -->
        <div class="mt-6 flex-1 overflow-hidden">
          <div class="w-full bg-white shadow-lg rounded-lg p-6 h-full overflow-y-auto" style="max-height: 70vh;"
            id="playwright-result">
            <!-- 添加 max-h-96 或其他合适的高度 -->
            <ul class="list-disc list-inside text-gray-600 space-y-2" id="playwright-result">

            </ul>
          </div>
        </div>
      </div>
      <!-- 进度页面 -->
      <div x-show="currentPage === 'progress'" class="space-y-6 flex-1 flex flex-col">
        <!-- 标题 -->
        <h1 class="text-3xl font-bold text-gray-800">任务进度</h1>
        <p class="text-gray-600">当前任务的执行进度如下：</p>

        <!-- 进度条 -->
        <div class="w-full bg-white shadow-lg rounded-lg p-6 transition-all duration-300 hover:shadow-xl">
          <div class="flex justify-between mb-3">
            <span class="text-gray-700 font-medium">任务进度</span>
            <span class="text-gray-700 font-semibold" x-text="progress.progressText"></span>
          </div>
          <div class="w-full bg-gray-100 rounded-full h-3 overflow-hidden">
            <div
              class="bg-gradient-to-r from-blue-400 to-purple-500 h-3 rounded-full transition-all duration-500 ease-in-out"
              :style="`width: ${progress.progressPercentage}%`"></div>
          </div>
        </div>

        <!-- 任务详情 -->
        <div class="w-full bg-white shadow-lg rounded-lg p-6 mt-6 transition-all duration-300 hover:shadow-xl">
          <h2 class="text-xl font-bold text-gray-800 mb-4">任务详情</h2>
          <ul class="list-disc list-inside text-gray-600 space-y-3">
            <li class="flex items-center space-x-2">
              <svg class="w-5 h-5 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
                </path>
              </svg>
              <span>总任务数: <span class="font-semibold text-blue-500" x-text="progress.totalTasks"></span></span>
            </li>
            <li class="flex items-center space-x-2">
              <svg class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
              </svg>
              <span>已完成任务数: <span class="font-semibold text-green-500" x-text="progress.completedTasks"></span></span>
            </li>
            <li class="flex items-center space-x-2">
              <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <!-- 错误图标-->
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
              </svg>
              <span>失败任务数: <span class="font-semibold text-red-500" x-text="progress.feiledTasks"></span></span>
            </li>
          </ul>
        </div>

        <!-- 提示信息 -->
        <div class="w-full bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mt-6">
          <div class="flex items-center space-x-3">
            <svg class="w-6 h-6 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
            <p class="text-gray-700">提示：任务进度会实时更新，请耐心等待。</p>
          </div>
        </div>
      </div>

      <!-- 数据中心页面 -->
      <div x-show="currentPage === 'data'" class="space-y-4">
        <h1 class="text-3xl font-bold text-gray-800">数据中心</h1>
        <div class="flex justify-center space-x-4">
          <div style="width: 60%;">
            <input type="text" id="date-range" placeholder="选择时间段"
              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 h-12"
              style="font-size: 15px; color: #666;">
          </div>
          <div>
            <!-- 下拉框触发按钮 -->
            <button @click="isOpen = !isOpen"
              class="w-full px-4 py-2.5 text-left text-base border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300 ease-in-out bg-white text-gray-700 hover:bg-gray-50 flex items-center justify-between">
              <span x-text="selectedOption || '请选择'" class="truncate"></span>
              <svg class="w-5 h-5 text-gray-400 transform transition-transform duration-300"
                :class="{ 'rotate-180': isOpen }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
              </svg>
            </button>

            <!-- 下拉菜单 -->
            <div x-show="isOpen" @click.away="isOpen = false"
              class="absolute z-10 mt-1 w-full bg-white border border-gray-300 rounded-lg shadow-lg overflow-hidden transform origin-top transition-all duration-300 ease-in-out"
              :class="{ 'scale-y-100 opacity-100': isOpen, 'scale-y-95 opacity-0': !isOpen }">
              <ul class="py-1">
                <template x-for="item in selectItems">
                  <li @click="selectedOption = item; isOpen = false"
                    class="px-4 py-2.5 text-gray-700 hover:bg-blue-50 cursor-pointer transition duration-300 ease-in-out flex items-center space-x-2">
                    <span x-text="item"></span>
                  </li>
                </template>
              </ul>
            </div>
          </div>
          <button id="query-data-btn" class="btn-primary" style="min-width: 80px;">
            查询
          </button>
          <button id="export-data-btn" class="btn-primary" style="min-width: 80px;">
            导出
          </button>
        </div>
        <div class="table-container" :style="{ maxWidth: !isCollapsed ? '68vw' : '88vw' }">
          <div id="wrapper"></div>
        </div>
        <div class="pagination-container">
          <div id="pagination" class="pagination"></div>
        </div>
      </div>

      <!-- 设置页面 -->
      <div x-show="currentPage === 'settings'" class="flex flex-col h-full">
        <!-- 固定标题区域 -->
        <div class="shadow-sm p-4">
          <h1 class="text-3xl font-bold text-gray-800">设置</h1>
        </div>

        <!-- 可滚动内容区域 -->
        <div class="flex-1 overflow-y-auto p-4 space-y-4" style="max-height: calc(100vh - 100px);">
          <div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">商品链接服务地址</h2>
            <div class="flex items-center space-x-3">
              <!-- 显示当前路径 -->
              <div class="flex-1 text-sm text-gray-600 truncate" x-text="serverAddress || '未设置地址'"></div>
              <span @click="isServerModalOpen = true" class="text-gray-700 font-medium btn-primary">商品链接服务地址</span>
            </div>
          </div>

          <!-- 图片保存路径设置卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">图片保存路径</h2>
            <div class="flex items-center space-x-3">
              <!-- 显示当前路径 -->
              <div class="flex-1 text-sm text-gray-600 truncate" x-text="imageSavePath || '未设置路径'"></div>
              <!-- 选择路径按钮 -->
              <span @click="openPathPicker" class="text-gray-700 font-medium btn-primary">选择路径</span>
            </div>
          </div>

          <!-- 并发数设置卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">并发数设置</h2>
            <div class="space-y-4">
              <!-- 滑条 -->
              <div class="flex items-center space-x-4">
                <input type="range" x-model="concurrency" min="1" max="20" step="1"
                  class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">
                <!-- 显示当前并发数 -->
                <span class="text-sm text-gray-600" x-text="concurrency"></span>
              </div>
              <!-- 提示信息 -->
              <p class="text-sm text-gray-500">设置同时执行的任务数量（1-20）。</p>
            </div>
          </div>

          <!-- 链接申请数量设置卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">链接申请数量设置</h2>
            <div class="space-y-4">
              <!-- 滑条 -->
              <div class="flex items-center space-x-4">
                <input type="range" x-model="link_application" min="100" max="10000" step="100"
                  class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500">
                <!-- 显示当前并发数 -->
                <span class="text-sm text-gray-600" x-text="link_application"></span>
              </div>
              <!-- 提示信息 -->
              <p class="text-sm text-gray-500">设置同时申请的链接数量（1-10000）。</p>
            </div>
          </div>

          <!-- 代理设置卡片 -->
          <div class="bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow duration-300">
            <h2 class="text-lg font-semibold text-gray-800 mb-3">代理设置</h2>
            <span @click="isProxyModalOpen = true" class="text-gray-700 font-medium btn-primary">设置代理</span>
          </div>
        </div>

        <div x-show="isServerModalOpen"
          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
            <h2 class="text-xl font-bold text-gray-800 mb-4">商品链接服务地址</h2>
            <form @submit.prevent="saveServerSettings">
              <!-- 代理地址输入 -->
              <div class="space-y-2">
                <label class="text-sm font-medium text-gray-700">商品链接服务地址</label>
                <input type="text" x-model="serverAddress" placeholder="例如：http://127.0.0.1:8000"
                  class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300">
              </div>
              <!-- 操作按钮 -->
              <div class="flex justify-end space-x-3 mt-6">
                <button type="button" @click="isServerModalOpen = false"
                  class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition duration-300">
                  取消
                </button>
                <button type="submit"
                  class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-md hover:from-blue-600 hover:to-purple-600 transition-all duration-300">
                  保存
                </button>
              </div>
            </form>
          </div>
        </div>

        <!-- 代理设置弹窗 -->
        <div x-show="isProxyModalOpen"
          class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
          <div class="bg-white rounded-lg shadow-lg p-6 w-full max-w-md">
            <h2 class="text-xl font-bold text-gray-800 mb-4">设置代理</h2>
            <form @submit.prevent="saveProxySettings">
              <!-- 代理地址输入 -->
              <div class="space-y-2">
                <label class="text-sm font-medium text-gray-700">代理地址</label>
                <input type="text" x-model="proxy.url" placeholder="例如：http://127.0.0.1"
                  class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300">
              </div>
              <!-- 代理端口输入 -->
              <div class="space-y-2 mt-4">
                <label class="text-sm font-medium text-gray-700">代理端口</label>
                <input type="text" x-model="proxy.port" placeholder="例如：8080"
                  class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300">
              </div>
              <!-- 代理用户名输入 -->
              <div class="space-y-2 mt-4">
                <label class="text-sm font-medium text-gray-700">用户名</label>
                <input type="text" x-model="proxy.username" placeholder="请输入用户名"
                  class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300">
              </div>
              <div class="space-y-2 mt-4">
                <label class="text-sm font-medium text-gray-700">密码</label>
                <input type="password" x-model="proxy.password" placeholder="请输入密码"
                  class="w-full px-3 py-2 border border-gray-200 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-300">
              </div>
              <!-- 操作按钮 -->
              <div class="flex justify-end space-x-3 mt-6">
                <button type="button" @click="isProxyModalOpen = false"
                  class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition duration-300">
                  取消
                </button>
                <button type="submit"
                  class="px-4 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-md hover:from-blue-600 hover:to-purple-600 transition-all duration-300">
                  保存
                </button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 关于页面 -->
      <div x-show="currentPage === 'about'" class="space-y-4">
        <h1 class="text-3xl font-bold text-gray-800">关于</h1>
        <p class="text-gray-600">我是 Tauri Python 项目的作者，欢迎来到这里！</p>
      </div>

      <!-- 联系页面 -->
      <div x-show="currentPage === 'contact'" class="space-y-4">
        <h1 class="text-3xl font-bold text-gray-800">联系</h1>
        <p class="text-gray-600">你可以通过以下方式联系我：</p>
        <ul class="list-disc list-inside text-gray-600">
          <li>Email: 947105045@qq.com</li>
        </ul>
      </div>
    </div>
  </div>
</body>

</html>